@import 'theme';
@import 'functions';
@import 'mixins';

$cx-order-details-order-header-border-color: 'light' !default;
$cx-order-details-detail-border-right-color: 'light' !default;
$cx-order-details-list-header-background-color: 'background' !default;
$cx-order-details-account-summary-background-color: 'background' !default;

$cx-order-details-order-header-padding: 1.875rem 0 !default;
$cx-order-details-order-header-margin-top: 2.5rem !default;
$cx-order-details-order-header-margin-bottom: 1.875rem !default;
$cx-order-details-order-header-border: 1px solid !default;
$cx-order-details-order-header-border-sm: 0 none !default;
$cx-order-details-order-header-margin-sm: 0 !default;

$cx-order-details-detail-border-right: 1px solid !default;
$cx-order-details-detail-padding-left: 1.875rem;
$cx-order-details-detail-no-border: 0 none !default;
$cx-order-details-detail-padding-bottom-sm: 0.625rem !default;
$cx-order-details-detail-padding-left-sm: 0.3125rem !default;

$cx-order-details-list-header-height: 3.5rem !default;
$cx-order-details-list-header-padding-left: 1.875rem !default;
$cx-order-details-list-header-padding-right: 1.875rem !default;
$cx-order-details-list-header-padding-left-sm: 1.25rem !default;
$cx-order-details-list-header-padding-right-sm: 1.25rem !default;

$cx-order-details-status-margin-bottom: 0 !default;
$cx-order-details-date-margin-bottom: 0 !default;

$cx-order-details-item-list-padding: 0 0 2.5rem 0 !default;
$cx-order-details-item-list-padding-sm: 0 !default;

$cx-order-details-order-summary-padding-sm: 0 0.25rem !default;

$cx-order-details-account-summary-margin-bottom: 3.125rem !default;
$cx-order-details-account-summary-margin-bottom-sm: 0 !default;
$cx-order-details-account-summary-card-padding-left-sm: 0 !default;
$cx-order-details-account-summary-card-padding-right-sm: 0 !default;

.cx-order-details {
  &__order-header {
    padding: $cx-order-details-order-header-padding;
    margin-top: $cx-order-details-order-header-margin-top;
    margin-bottom: $cx-order-details-order-header-margin-bottom;

    border: $cx-order-details-order-header-border;
    @include var-color(
      'border-color',
      $cx-order-details-order-header-border-color
    );

    @include media-breakpoint-down(sm) {
      border: $cx-order-details-order-header-border-sm;
      margin: $cx-order-details-order-header-margin-sm;
    }
  }

  &__detail {
    border-right: $cx-order-details-detail-border-right;
    @include var-color(
      'border-right-color',
      $cx-order-details-detail-border-right-color
    );
    padding-left: $cx-order-details-detail-padding-left;

    &:last-child {
      border: $cx-order-details-detail-no-border;
    }

    @include media-breakpoint-down(sm) {
      padding-bottom: $cx-order-details-detail-padding-bottom-sm;
      padding-left: $cx-order-details-detail-padding-left-sm;
      border-right: $cx-order-details-detail-no-border;
    }
  }

  &__label {
    @include type('4');
  }

  &__value {
    @include type('5');
    font-weight: $font-weight-normal;
  }

  &__list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: $cx-order-details-list-header-height;
    @include var-color(
      'background-color',
      $cx-order-details-list-header-background-color
    );
    padding-left: $cx-order-details-list-header-padding-left;
    padding-right: $cx-order-details-list-header-padding-right;

    @include media-breakpoint-down(sm) {
      padding-left: $cx-order-details-list-header-padding-left-sm;
      padding-right: $cx-order-details-list-header-padding-right-sm;
    }
  }

  &__status {
    @include type('4');
    margin-bottom: $cx-order-details-status-margin-bottom;
  }

  &__date {
    @include type('7');
    display: flex;
    justify-content: flex-end;
    margin-bottom: $cx-order-details-date-margin-bottom;

    @include media-breakpoint-down(sm) {
      flex-direction: column;
      align-items: flex-end;
    }
  }

  &__item-list {
    padding: $cx-order-details-item-list-padding;
    @include media-breakpoint-down(sm) {
      padding: $cx-order-details-item-list-padding-sm;
    }
  }

  &__order-summary {
    @include media-breakpoint-down(sm) {
      padding: $cx-order-details-order-summary-padding-sm;
    }
  }

  &__account-summary {
    @include var-color(
      'background-color',
      $cx-order-details-account-summary-background-color
    );
    margin-bottom: $cx-order-details-account-summary-margin-bottom;

    @include media-breakpoint-down(sm) {
      margin-bottom: $cx-order-details-account-summary-margin-bottom-sm;
    }

    &-card {
      @include media-breakpoint-down(sm) {
        padding-left: $cx-order-details-account-summary-card-padding-left-sm;
        padding-right: $cx-order-details-account-summary-card-padding-right-sm;
      }
    }
  }

  $cx-cart-item-list-header-padding: 1.125rem 1.875rem !default;
  $cx-cart-item-list-header-padding-md: 1.125rem 1.875rem !default;
  $cx-cart-item-list-row-padding: 1.625rem 1.875rem !default;
  $cx-cart-item-list-row-padding-md: 1.625rem 1.875rem !default;
  $cx-cart-item-list-row-padding-sm: 1.625rem 0 !default;
  $cx-cart-item-list-item-padding: 0 !default;
  $cx-cart-item-list-item-padding-sm: 0 0 0 1.25rem !default;

  .cx-cart-item-list {
    .cx-cart-item-list__header {
      padding: $cx-cart-item-list-header-padding;
      @include media-breakpoint-down(md) {
        padding: $cx-cart-item-list-header-padding-md;
      }
    }

    .cx-cart-item-list__row {
      padding: $cx-cart-item-list-row-padding;
      @include media-breakpoint-down(md) {
        padding: $cx-cart-item-list-row-padding-md;
      }

      @include media-breakpoint-down(sm) {
        padding: $cx-cart-item-list-row-padding-sm;
      }
    }

    .cx-cart-item-list__item {
      padding: $cx-cart-item-list-item-padding;

      @include media-breakpoint-down(sm) {
        padding: $cx-cart-item-list-item-padding-sm;
      }
    }
  }
}
